<template>
  <div class="container">
    <Waterfall :list="items" :breakpoints="breakpoints">
      <template #item="{ item, url }">
        <ZLazyImage :url="url" :alt="item.title" />
        <div class="item-content">
          <h3>{{ item.title }}</h3>
          <p>{{ item.description }}</p>
        </div>
      </template>
    </Waterfall>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
import Waterfall from '../../components/comCollection/Waterfall.vue'
import ZLazyImage from '../../components/comCollection/ZLazyImage.vue'


export default {
  components: { Waterfall, ZLazyImage },

  setup() {
    const items = ref([]);
    const breakpoints = ref({
      1200: { rowPerView: 4 },
      800: { rowPerView: 3 },
      500: { rowPerView: 2 }
    });


    let list = [
      'https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=400&q=80',
      'https://images.unsplash.com/photo-1461749280684-dccba630e2f6?auto=format&fit=crop&w=400&q=80',
      'https://api.dicebear.com/8.x/avataaars/svg?seed=CTO',
      'https://api.dicebear.com/8.x/shapes/svg?seed=https://api.dicebear.com/8.x/shapes/svg?seed=CTO',
      'https://api.dicebear.com/8.x/shapes/svg?seed=https://api.dicebear.com/8.x/shapes/svg?seed=CEO',
      'https://img0.baidu.com/it/u=933220220,287299241&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500'
    ]

    definePageMeta({
      layout: 'minimal',
      showHeader: false
    });

    // 生成示例数据
    const generateItems = (count) => {
      return Array.from({ length: count }, (_, i) => ({
        id: i + 1,
        title: `Item ${i + 1}`,
        description: 'Description here',
        src: (i + 1) % 2 !== 0 ? `https://picsum.photos/300/400?random=${i}` : `${list[Math.floor(Math.random() * list.length)]}`
      }));
    };

    onMounted(() => {
      items.value = generateItems(2000);
    });

    return {
      items,
      breakpoints
    };
  }
};
</script>

<style>
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px;
  /* background-color: red; */
}

.item-content {
  padding: 10px;
  background: white;
  border: 1px solid #eee;
  margin-top: 8px;
}
</style>
